<template>
  <span v-if="num">{{displayNum}}</span>
</template>
<script lang="ts">
  import { Component, Prop, Vue } from 'vue-property-decorator'

  @Component
  export default class Tips extends Vue {
    @Prop() num

    get displayNum () {
      if (this.num < 100) {
        return this.num
      } else {
        return '99+'
      }
    }
  }
</script>
<style lang="less" scoped>
  span {
    display: inline-block;
    text-align: center;
    color: #fff;
    background: #E84F5A;
    width: 18px;
    height: 18px;
    line-height: 18px;
    border-radius: 50%;
    vertical-align: baseline;
    margin-left: 6px;
    font-size: 12px;
  }
</style>
